import { Element } from './element'
import { Div } from './div'
import { Animation, AnimationTransform } from './animation'

/**
 * 样式属性接口
 */
export interface StyleProps {
  [key: string]: string | number | boolean | undefined
}

/**
 * 元素接口
 */
export interface ElementWithSetStyle {
  setStyle(style: StyleProps): this
  addChild?(child: Element): void
  setText?(text: string): this
}

/**
 * 样式化接口
 */
export type Styled<T> = {
  /**
   * 设置样式
   */
  styled(style: StyleProps): T

  /**
   * 设置宽度
   */
  width(value: string | number): T

  /**
   * 设置高度
   */
  height(value: string | number): T

  /**
   * 设置背景颜色
   */
  backgroundColor(color: string): T

  /**
   * 设置颜色
   */
  color(color: string): T

  /**
   * 设置字体大小
   */
  fontSize(size: string | number): T

  /**
   * 设置字体粗细
   */
  fontWeight(weight: string | number): T

  /**
   * 设置内边距
   */
  padding(padding: string | number): T

  /**
   * 设置外边距
   */
  margin(margin: string | number): T

  /**
   * 设置边框
   */
  border(border: string): T
  border(width: string | number, style: string, color: string | number): T

  /**
   * 设置边框圆角
   */
  borderRadius(radius: string | number): T
  border_radius(radius: string | number): T

  /**
   * 设置显示方式
   */
  display(display: string): T

  /**
   * 设置弹性布局
   */
  flexDirection(direction: string): T

  /**
   * 设置对齐方式
   */
  alignItems(align: string): T

  /**
   * 设置内容对齐方式
   */
  justifyContent(justify: string): T

  /**
   * 设置文本对齐方式
   */
  textAlign(align: string): T

  /**
   * 设置溢出处理
   */
  overflow(overflow: string): T

  /**
   * 设置位置
   */
  position(position: string): T

  /**
   * 设置左偏移
   */
  left(value: string | number): T

  /**
   * 设置上偏移
   */
  top(value: string | number): T

  /**
   * 设置右偏移
   */
  right(value: string | number): T

  /**
   * 设置下偏移
   */
  bottom(value: string | number): T

  /**
   * 设置z-index
   */
  zIndex(index: number): T

  /**
   * 设置为弹性布局
   */
  flex(): T & Styled<T>

  /**
   * 设置弹性布局方向为水平
   */
  flex_row(): T & Styled<T>

  /**
   * 设置弹性布局方向为垂直
   */
  flex_col(): T & Styled<T>

  /**
   * 设置弹性布局换行
   */
  flex_wrap(): T & Styled<T>

  /**
   * 设置间距
   */
  gap_3(): T & Styled<T>

  /**
   * 设置背景颜色
   */
  bg(color: string | number): T & Styled<T>

  /**
   * 设置尺寸
   */
  size(size: string | number): T & Styled<T>

  /**
   * 设置为满尺寸
   */
  size_full(): T & Styled<T>

  /**
   * 设置内容居中
   */
  justify_center(): T & Styled<T>

  /**
   * 设置项目居中
   */
  items_center(): T & Styled<T>

  /**
   * 设置大阴影
   */
  shadow_lg(): T & Styled<T>

  /**
   * 设置边框为虚线样式
   */
  border_dashed(): T & Styled<T>

  /**
   * 设置圆角为中等大小
   */
  rounded_md(): T & Styled<T>

  /**
   * 设置边框宽度为1px
   */
  border_1(): T & Styled<T>

  /**
   * 设置间距为0.5rem
   */
  gap_2(): T & Styled<T>

  /**
   * 设置边框颜色
   */
  border_color(color: string | number): T & Styled<T>

  /**
   * 设置文本大小为xl
   */
  text_xl(): T & Styled<T>

  /**
   * 设置文本颜色
   */
  text_color(color: string | number): T & Styled<T>

  /**
   * 添加子元素
   */
  child(child: Element | string): T & Styled<T>

  /**
   * 条件性地添加子元素或执行操作
   */
  when(condition: boolean, callback: (context: { child: (child: Element | string) => void }) => void): T & Styled<T>

  /**
   * 添加动画
   */
  with_animation(id: string, animation: Animation<T>, transform: AnimationTransform<T>): T & Styled<T>

  /**
   * 设置变换
   */
  with_transformation(transform: string): T & Styled<T>

  /**
   * 设置尺寸为8个单位
   */
  size_8(): T & Styled<T>

  /**
   * 设置宽度为100%
   */
  w_full(): T & Styled<T>

  /**
   * 平均分布子元素
   */
  justify_around(): T & Styled<T>

  /**
   * Grid布局支持
   */
  grid(): T & Styled<T>
  grid_template_columns(template: string): T & Styled<T>
  grid_template_rows(template: string): T & Styled<T>
  grid_column(column: string): T & Styled<T>
  grid_row(row: string): T & Styled<T>
  grid_gap(gap: string | number): T & Styled<T>
  
  /**
   * 滚动相关方法
   */
  overflow_hidden(): T & Styled<T>
  overflow_auto(): T & Styled<T>
  overflow_scroll(): T & Styled<T>
  overflow_x_hidden(): T & Styled<T>
  overflow_x_auto(): T & Styled<T>
  overflow_x_scroll(): T & Styled<T>
  overflow_y_hidden(): T & Styled<T>
  overflow_y_auto(): T & Styled<T>
  overflow_y_scroll(): T & Styled<T>

  /**
   * Flex布局控制
   */
  flex_auto(): T & Styled<T>
  flex_initial(): T & Styled<T>
  flex_none(): T & Styled<T>
  flex_grow(grow: number): T & Styled<T>
  flex_shrink(shrink: number): T & Styled<T>
  flex_shrink_0(): T & Styled<T>
  flex_basis(basis: string | number): T & Styled<T>
  flex_col_reverse(): T & Styled<T>
  flex_row_reverse(): T & Styled<T>
  flex_wrap_reverse(): T & Styled<T>

  /**
   * 内容对齐相关
   */
  content_center(): T & Styled<T>
  content_between(): T & Styled<T>
  content_around(): T & Styled<T>
  content_start(): T & Styled<T>
  content_end(): T & Styled<T>
  content_evenly(): T & Styled<T>
  content_stretch(): T & Styled<T>
  content_normal(): T & Styled<T>

  /**
   * 文本相关
   */
  text_ellipsis(): T & Styled<T>
  truncate(): T & Styled<T>
  whitespace_nowrap(): T & Styled<T>
  whitespace_normal(): T & Styled<T>
  text_left(): T & Styled<T>
  text_center(): T & Styled<T>
  text_right(): T & Styled<T>
  line_clamp(lines: number): T & Styled<T>
  line_height(height: string | number): T & Styled<T>
  font_size(size: string | number): T & Styled<T>
  font_weight(weight: string | number): T & Styled<T>

  /**
   * 边框
   */
  border_dashed(width?: string, color?: string): T & Styled<T>
  padding_x(padding: string | number): T & Styled<T>
  padding_y(padding: string | number): T & Styled<T>
  margin_x(margin: string | number): T & Styled<T>
  margin_y(margin: string | number): T & Styled<T>

  /**
   * 更多Flex布局方法
   */
  justify_start(): T & Styled<T>
  justify_end(): T & Styled<T>
  justify_between(): T & Styled<T>
  justify_evenly(): T & Styled<T>
  items_start(): T & Styled<T>
  items_end(): T & Styled<T>
  items_baseline(): T & Styled<T>
  items_stretch(): T & Styled<T>

  /**
   * 可见性
   */
  visible(): T & Styled<T>
  invisible(): T & Styled<T>

  /**
   * 动态边框方法会通过Proxy拦截实现
   * 例如: border_1(), border_t_2(), border_r_3() 等
   */
  [key: string]: any;
}

/**
 * 为元素添加样式化功能
 */
export function withStyled<T extends { setStyle(style: StyleProps): T }>(element: T): T & Styled<T> {
  const styledElement = element as T & Styled<T>
  // 存储元素的动画管理器
  let animationManager: any = null

  // 获取或创建动画管理器
  const getAnimationManager = (): any => {
    if (!animationManager) {
      // 动态导入AnimationManager
      import('./animation').then(module => {
        animationManager = new module.AnimationManager()
      })
    }
    return animationManager
  }

  // 基础样式设置方法
  styledElement.styled = function(style: StyleProps): T & Styled<T> {
    return this.setStyle(style) as T & Styled<T>
  }

  // 尺寸相关
  styledElement.width = function(value: string | number): T & Styled<T> {
    return this.setStyle({ width: value }) as T & Styled<T>
  }

  styledElement.height = function(value: string | number): T & Styled<T> {
    return this.setStyle({ height: value }) as T & Styled<T>
  }

  // 颜色相关
  styledElement.backgroundColor = function(color: string): T & Styled<T> {
    return this.setStyle({ backgroundColor: color }) as T & Styled<T>
  }

  styledElement.color = function(color: string): T & Styled<T> {
    return this.setStyle({ color }) as T & Styled<T>
  }

  // 字体相关
  styledElement.fontSize = function(size: string | number): T & Styled<T> {
    return this.setStyle({ fontSize: size }) as T & Styled<T>
  }

  styledElement.fontWeight = function(weight: string | number): T & Styled<T> {
    return this.setStyle({ fontWeight: weight }) as T & Styled<T>
  }

  // 边距相关
  styledElement.padding = function(padding: string | number): T & Styled<T> {
    return this.setStyle({ padding }) as T & Styled<T>
  }

  styledElement.margin = function(margin: string | number): T & Styled<T> {
    return this.setStyle({ margin }) as T & Styled<T>
  }

  // 边框相关 - border方法已在下方重新实现以支持重载

  styledElement.borderRadius = function(radius: string | number): T & Styled<T> {
    return this.setStyle({ borderRadius: radius }) as T & Styled<T>
  }

  styledElement.border_radius = function(radius: string | number): T & Styled<T> {
    return this.setStyle({ borderRadius: radius }) as T & Styled<T>
  }

  // 布局相关
  styledElement.display = function(display: string): T {
    return this.setStyle({ display })
  }

  styledElement.flexDirection = function(direction: string): T {
    return this.setStyle({ flexDirection: direction })
  }

  styledElement.alignItems = function(align: string): T {
    return this.setStyle({ alignItems: align })
  }

  styledElement.justifyContent = function(justify: string): T {
    return this.setStyle({ justifyContent: justify })
  }

  // 文本相关
  styledElement.textAlign = function(align: string): T {
    return this.setStyle({ textAlign: align })
  }

  // 溢出相关
  styledElement.overflow = function(overflow: string): T {
    return this.setStyle({ overflow })
  }

  // 滚动相关样式方法
    styledElement.overflow_hidden = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('hidden', 'hidden') as T & Styled<T>
      }
      return this.setStyle({ overflow: 'hidden' }) as T & Styled<T>
    }
    
    styledElement.overflow_auto = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('auto', 'auto') as T & Styled<T>
      }
      return this.setStyle({ overflow: 'auto' }) as T & Styled<T>
    }

    styledElement.overflow_scroll = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('scroll', 'scroll') as T & Styled<T>
      }
      return this.setStyle({ overflow: 'scroll' }) as T & Styled<T>
    }
    
    styledElement.overflow_x_hidden = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('hidden', this.overflowY || 'visible') as T & Styled<T>
      }
      return this.setStyle({ overflowX: 'hidden' }) as T & Styled<T>
    }
    
    styledElement.overflow_x_auto = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('auto', this.overflowY || 'visible') as T & Styled<T>
      }
      return this.setStyle({ overflowX: 'auto' }) as T & Styled<T>
    }
    
    styledElement.overflow_x_scroll = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow('scroll', this.overflowY || 'visible') as T & Styled<T>
      }
      return this.setStyle({ overflowX: 'scroll' }) as T & Styled<T>
    }
    
    styledElement.overflow_y_hidden = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow(this.overflowX || 'visible', 'hidden') as T & Styled<T>
      }
      return this.setStyle({ overflowY: 'hidden' }) as T & Styled<T>
    }
    
    styledElement.overflow_y_auto = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow(this.overflowX || 'visible', 'auto') as T & Styled<T>
      }
      return this.setStyle({ overflowY: 'auto' }) as T & Styled<T>
    }
    
    styledElement.overflow_y_scroll = function(): T & Styled<T> {
      if (this.setOverflow) {
        return this.setOverflow(this.overflowX || 'visible', 'scroll') as T & Styled<T>
      }
      return this.setStyle({ overflowY: 'scroll' }) as T & Styled<T>
    }

  // 定位相关
  styledElement.position = function(position: string): T {
    return this.setStyle({ position })
  }

  styledElement.left = function(value: string | number): T {
    return this.setStyle({ left: value })
  }

  styledElement.top = function(value: string | number): T {
    return this.setStyle({ top: value })
  }

  styledElement.right = function(value: string | number): T {
    return this.setStyle({ right: value })
  }

  styledElement.bottom = function(value: string | number): T {
    return this.setStyle({ bottom: value })
  }

  styledElement.zIndex = function(index: number): T {
    return this.setStyle({ zIndex: index })
  }

  // Tailwind CSS 风格的便捷方法
  styledElement.flex = function(): T & Styled<T> {
    this.setStyle({ display: 'flex' })
    return styledElement
  }

  styledElement.flex_row = function(): T & Styled<T> {
    return this.setStyle({ flexDirection: 'row' }) as T & Styled<T>
  }

  styledElement.flex_col = function(): T & Styled<T> {
    return this.setStyle({ flexDirection: 'column' }) as T & Styled<T>
  }

  styledElement.flex_wrap = function(): T & Styled<T> {
    return this.setStyle({ flexWrap: 'wrap' }) as T & Styled<T>
  }

  styledElement.gap_3 = function(): T & Styled<T> {
    return this.setStyle({ gap: '0.75rem' }) as T & Styled<T>
  }

  styledElement.bg = function(color: string | number): T & Styled<T> {
    const colorStr = typeof color === 'number' ? `#${color.toString(16).padStart(6, '0')}` : color
    return this.setStyle({ backgroundColor: colorStr }) as T & Styled<T>
  }

  styledElement.size = function(size: string | number): T & Styled<T> {
    return this.setStyle({ width: size, height: size }) as T & Styled<T>
  }

  styledElement.size_full = function(): T & Styled<T> {
    return this.setStyle({ width: '100%', height: '100%' }) as T & Styled<T>
  }

  styledElement.justify_center = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'center' }) as T & Styled<T>
  }

  styledElement.items_center = function(): T & Styled<T> {
    return this.setStyle({ alignItems: 'center' }) as T & Styled<T>
  }

  styledElement.shadow_lg = function(): T & Styled<T> {
    return this.setStyle({ boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)' }) as T & Styled<T>
  }

  styledElement.border_color = function(color: string | number): T & Styled<T> {
    const colorStr = typeof color === 'number' ? `#${color.toString(16).padStart(6, '0')}` : color
    return this.setStyle({ borderColor: colorStr }) as T & Styled<T>
  }

  styledElement.text_xl = function(): T & Styled<T> {
    return this.setStyle({ fontSize: '1.25rem' }) as T & Styled<T>
  }

  styledElement.text_color = function(color: string | number): T & Styled<T> {
    const colorStr = typeof color === 'number' ? `#${color.toString(16).padStart(6, '0')}` : color
    return this.setStyle({ color: colorStr }) as T & Styled<T>
  }

  // 更多便捷样式方法
  styledElement.border_1 = function(): T & Styled<T> {
    return this.setStyle({ borderWidth: '1px' }) as T & Styled<T>
  }

  styledElement.border_dashed = function(): T & Styled<T> {
    return this.setStyle({ borderStyle: 'dashed' }) as T & Styled<T>
  }

  styledElement.rounded_md = function(): T & Styled<T> {
    return this.setStyle({ borderRadius: '6px' }) as T & Styled<T>
  }

  styledElement.gap_2 = function(): T & Styled<T> {
    return this.setStyle({ gap: '0.5rem' }) as T & Styled<T>
  }

  styledElement.size_8 = function(): T & Styled<T> {
    return this.setStyle({ width: '2rem', height: '2rem' }) as T & Styled<T>
  }

  styledElement.w_full = function(): T & Styled<T> {
    return this.setStyle({ width: '100%' }) as T & Styled<T>
  }

  styledElement.justify_around = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'space-around' }) as T & Styled<T>
  }

  // Grid布局相关
  styledElement.grid = function(): T & Styled<T> {
    return this.setStyle({ display: 'grid' }) as T & Styled<T>
  }

  styledElement.grid_template_columns = function(template: string): T & Styled<T> {
    return this.setStyle({ gridTemplateColumns: template }) as T & Styled<T>
  }

  styledElement.grid_template_rows = function(template: string): T & Styled<T> {
    return this.setStyle({ gridTemplateRows: template }) as T & Styled<T>
  }

  styledElement.grid_column = function(column: string): T & Styled<T> {
    return this.setStyle({ gridColumn: column }) as T & Styled<T>
  }

  styledElement.grid_row = function(row: string): T & Styled<T> {
    return this.setStyle({ gridRow: row }) as T & Styled<T>
  }

  styledElement.grid_gap = function(gap: string | number): T & Styled<T> {
    return this.setStyle({ gap }) as T & Styled<T>
  }

  // Flex布局控制
  styledElement.flex_auto = function(): T & Styled<T> {
    return this.setStyle({ flex: '1 1 auto' }) as T & Styled<T>
  }

  styledElement.flex_initial = function(): T & Styled<T> {
    return this.setStyle({ flex: '0 1 auto' }) as T & Styled<T>
  }

  styledElement.flex_none = function(): T & Styled<T> {
    return this.setStyle({ flex: 'none' }) as T & Styled<T>
  }

  styledElement.flex_grow = function(grow: number): T & Styled<T> {
    return this.setStyle({ flexGrow: grow }) as T & Styled<T>
  }

  styledElement.flex_shrink = function(shrink: number): T & Styled<T> {
    return this.setStyle({ flexShrink: shrink }) as T & Styled<T>
  }

  styledElement.flex_shrink_0 = function(): T & Styled<T> {
    return this.setStyle({ flexShrink: 0 }) as T & Styled<T>
  }

  styledElement.flex_basis = function(basis: string | number): T & Styled<T> {
    return this.setStyle({ flexBasis: basis }) as T & Styled<T>
  }

  styledElement.flex_col_reverse = function(): T & Styled<T> {
    return this.setStyle({ display: 'flex', flexDirection: 'column-reverse' }) as T & Styled<T>
  }

  styledElement.flex_row_reverse = function(): T & Styled<T> {
    return this.setStyle({ display: 'flex', flexDirection: 'row-reverse' }) as T & Styled<T>
  }

  styledElement.flex_wrap_reverse = function(): T & Styled<T> {
    return this.setStyle({ flexWrap: 'wrap-reverse' }) as T & Styled<T>
  }

  // 内容对齐相关
  styledElement.content_center = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'center' }) as T & Styled<T>
  }

  styledElement.content_between = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'space-between' }) as T & Styled<T>
  }

  styledElement.content_around = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'space-around' }) as T & Styled<T>
  }

  styledElement.content_start = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'flex-start' }) as T & Styled<T>
  }

  styledElement.content_end = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'flex-end' }) as T & Styled<T>
  }

  styledElement.content_evenly = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'space-evenly' }) as T & Styled<T>
  }

  styledElement.content_stretch = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'stretch' }) as T & Styled<T>
  }

  styledElement.content_normal = function(): T & Styled<T> {
    return this.setStyle({ alignContent: 'normal' }) as T & Styled<T>
  }

  // 文本相关
  styledElement.text_ellipsis = function(): T & Styled<T> {
    return this.setStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }) as T & Styled<T>
  }

  styledElement.truncate = function(): T & Styled<T> {
    return this.text_ellipsis()
  }

  styledElement.whitespace_nowrap = function(): T & Styled<T> {
    return this.setStyle({ whiteSpace: 'nowrap' }) as T & Styled<T>
  }

  styledElement.whitespace_normal = function(): T & Styled<T> {
    return this.setStyle({ whiteSpace: 'normal' }) as T & Styled<T>
  }

  styledElement.text_left = function(): T & Styled<T> {
    return this.setStyle({ textAlign: 'left' }) as T & Styled<T>
  }

  styledElement.text_center = function(): T & Styled<T> {
    return this.setStyle({ textAlign: 'center' }) as T & Styled<T>
  }

  styledElement.text_right = function(): T & Styled<T> {
    return this.setStyle({ textAlign: 'right' }) as T & Styled<T>
  }

  styledElement.line_clamp = function(lines: number): T & Styled<T> {
    return this
      .overflow_hidden()
      .setStyle({
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: lines
      }) as T & Styled<T>
  }

  styledElement.line_height = function(height: string | number): T & Styled<T> {
    return this.setStyle({ lineHeight: height }) as T & Styled<T>
  }

  styledElement.font_size = function(size: string | number): T & Styled<T> {
    return this.setStyle({ fontSize: size }) as T & Styled<T>
  }

  styledElement.font_weight = function(weight: string | number): T & Styled<T> {
    return this.setStyle({ fontWeight: weight }) as T & Styled<T>
  }

  // 边框
  styledElement.border = function(this: T & Styled<T>, ...args: any[]): T & Styled<T> {
    if (args.length === 1) {
      // border(string) 形式
      return this.setStyle({ border: args[0] }) as T & Styled<T>
    } else if (args.length === 3) {
      // border(width, style, color) 形式
      const [width, style, color] = args
      const colorStr = typeof color === 'number' ? `#${color.toString(16).padStart(6, '0')}` : color
      return this.setStyle({ border: `${width} ${style} ${colorStr}` }) as T & Styled<T>
    }
    return this as T & Styled<T>
  }

  styledElement.border_dashed = function(width: string = '1px', color: string = 'black'): T & Styled<T> {
    const colorStr = typeof color === 'number' ? `#${Math.floor(color).toString(16).padStart(6, '0')}` : String(color)
    return this.setStyle({
      borderWidth: width,
      borderStyle: 'dashed',
      borderColor: colorStr
    }) as T & Styled<T>
  }

  styledElement.padding_x = function(padding: string | number): T & Styled<T> {
    return this.setStyle({ paddingLeft: padding, paddingRight: padding }) as T & Styled<T>
  }

  styledElement.padding_y = function(padding: string | number): T & Styled<T> {
    return this.setStyle({ paddingTop: padding, paddingBottom: padding }) as T & Styled<T>
  }

  styledElement.margin_x = function(margin: string | number): T & Styled<T> {
    return this.setStyle({ marginLeft: margin, marginRight: margin }) as T & Styled<T>
  }

  styledElement.margin_y = function(margin: string | number): T & Styled<T> {
    return this.setStyle({ marginTop: margin, marginBottom: margin }) as T & Styled<T>
  }

  // 更多Flex布局方法
  styledElement.justify_start = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'flex-start' }) as T & Styled<T>
  }

  styledElement.justify_end = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'flex-end' }) as T & Styled<T>
  }

  styledElement.justify_between = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'space-between' }) as T & Styled<T>
  }

  styledElement.justify_evenly = function(): T & Styled<T> {
    return this.setStyle({ justifyContent: 'space-evenly' }) as T & Styled<T>
  }

  styledElement.items_start = function(): T & Styled<T> {
    return this.setStyle({ alignItems: 'flex-start' }) as T & Styled<T>
  }

  styledElement.items_end = function(): T & Styled<T> {
    return this.setStyle({ alignItems: 'flex-end' }) as T & Styled<T>
  }

  styledElement.items_baseline = function(): T & Styled<T> {
    return this.setStyle({ alignItems: 'baseline' }) as T & Styled<T>
  }

  styledElement.items_stretch = function(): T & Styled<T> {
    return this.setStyle({ alignItems: 'stretch' }) as T & Styled<T>
  }

  // 可见性
  styledElement.visible = function(): T & Styled<T> {
    return this.setStyle({ visibility: 'visible' }) as T & Styled<T>
  }

  styledElement.invisible = function(): T & Styled<T> {
    return this.setStyle({ visibility: 'hidden' }) as T & Styled<T>
  }

  // 动画相关方法
  styledElement.with_animation = function(
    id: string,
    animation: Animation<T>,
    transform: AnimationTransform<T>
  ): T & Styled<T> {
    // 存储动画到管理器
    const manager = getAnimationManager()
    if (manager) {
      manager.addAnimation(id, animation)
    }
    
    // 启动动画
    animation.start(this as T, transform)
    
    return this as T & Styled<T>
  }

  // 变换相关方法
  styledElement.with_transformation = function(transform: string): T & Styled<T> {
    return this.setStyle({ transform }) as T & Styled<T>
  }

  styledElement.child = function(child: Element | string): T & Styled<T> {
    if ('addChild' in this && typeof (this as any).addChild === 'function') {
      if (typeof child === 'string') {
        // 如果是字符串，创建一个文本元素
        const textElement = new Div();
        textElement.setText(child);

        (this as any).addChild(textElement)
      } else {
        (this as any).addChild(child)
      }
    }
    return this as T & Styled<T>
  }

  styledElement.when = function(condition: boolean, callback: (context: { child: (child: Element | string) => void }) => void): T & Styled<T> {
    if (condition && 'addChild' in this && typeof (this as any).addChild === 'function') {
      // 创建上下文对象
      const context = {
        child: (child: Element | string) => {
          if (typeof child === 'string') {
            // 如果是字符串，创建一个文本元素
            const textElement = new Div();
            textElement.setText(child);
            (this as any).addChild(textElement)
          } else {
            (this as any).addChild(child)
          }
        }
      };
      
      // 调用回调函数
      callback(context);
    }
    return this as T & Styled<T>
  }

  // 创建代理对象，拦截对不存在方法的调用
  return new Proxy(styledElement, {
    get(target, prop, receiver) {
      // 如果属性已存在，直接返回
      if (prop in target) {
        return Reflect.get(target, prop, receiver);
      }

      // 检查是否是数值样式方法调用 (如 border_1, margin_t_2, padding_x_4 等)
      const numericStyleMatch = String(prop).match(/^(border|margin|padding)(_([tblrxy]))?_([0-9]+)$/);
      if (numericStyleMatch) {
        const [, styleType, , direction, value] = numericStyleMatch;
        const valueNum = parseInt(value, 10);
        const pxValue = `${valueNum}px`;
        
        // 保存当前目标对象，解决箭头函数中的this问题
        const currentTarget = receiver;
        
        // 创建并返回动态数值样式方法
        return function() {
          const style: any = {};
          
          // 基础样式属性名映射
          const baseStyleProps: {[key: string]: string} = {
            'border': 'borderWidth',
            'margin': 'margin',
            'padding': 'padding'
          };
          
          // 方向属性名映射
          const directionProps: {[key: string]: {[key: string]: string}} = {
            't': {
              'border': 'borderTopWidth',
              'margin': 'marginTop',
              'padding': 'paddingTop'
            },
            'b': {
              'border': 'borderBottomWidth',
              'margin': 'marginBottom',
              'padding': 'paddingBottom'
            },
            'l': {
              'border': 'borderLeftWidth',
              'margin': 'marginLeft',
              'padding': 'paddingLeft'
            },
            'r': {
              'border': 'borderRightWidth',
              'margin': 'marginRight',
              'padding': 'paddingRight'
            }
          };
          
          // 根据方向设置不同的样式属性
          if (!direction) {
            // 没有方向后缀，设置所有方向
            style[baseStyleProps[styleType]] = pxValue;
          } else if (direction === 't' || direction === 'b' || direction === 'l' || direction === 'r') {
            // 单个方向（top, bottom, left, right）
            style[directionProps[direction][styleType]] = pxValue;
          } else if (direction === 'x') {
            // 水平方向（左右）
            if (styleType === 'border') {
              style.borderLeftWidth = pxValue;
              style.borderRightWidth = pxValue;
            } else {
              style[`${styleType}Left`] = pxValue;
              style[`${styleType}Right`] = pxValue;
            }
          } else if (direction === 'y') {
            // 垂直方向（上下）
            if (styleType === 'border') {
              style.borderTopWidth = pxValue;
              style.borderBottomWidth = pxValue;
            } else {
              style[`${styleType}Top`] = pxValue;
              style[`${styleType}Bottom`] = pxValue;
            }
          }
          
          // 非零宽度时为边框设置样式为实线
          if (styleType === 'border' && valueNum > 0) {
            style.borderStyle = 'solid';
          }
          
          currentTarget.setStyle(style);
          return currentTarget;
        };
      }

      // 其他未知属性，返回默认值
      return Reflect.get(target, prop, receiver);
    }
  });
}

/**
 * RGB颜色辅助函数
 */
export function rgb(value: number): string {
  return `#${value.toString(16).padStart(6, '0')}`
}

/**
 * 黑色
 */
export function black(): string {
  return '#000000'
}

/**
 * 白色
 */
export function white(): string {
  return '#ffffff'
}

/**
 * 常用颜色集合
 * 提供更友好的颜色访问方式，如 colors.red, colors.blue 等
 */
export const colors = {
  // 基础颜色
  red: rgb(0xff0000),
  green: rgb(0x00ff00),
  blue: rgb(0x0000ff),
  yellow: rgb(0xffff00),
  magenta: rgb(0xff00ff),
  cyan: rgb(0x00ffff),
  white: rgb(0xffffff),
  black: rgb(0x000000),
  gray: rgb(0x808080),
  
  // 其他常用颜色
  primary: rgb(0x0066cc), // 示例中的原蓝色
  secondary: rgb(0x505050),
  success: rgb(0x22c55e),
  warning: rgb(0xf59e0b),
  error: rgb(0xef4444),
  info: rgb(0x3b82f6)
}

/**
 * 像素值辅助函数
 */
export function px(value: number): string {
  return `${value}px`
}

/**
 * 创建一个带样式的Div元素
 */
export function div(): Div & Styled<Div> {
  return withStyled(new Div())
}

/**
 * 创建一个带样式的Div元素（别名）
 */
export function styledDiv(): Div & Styled<Div> {
  return div()
}

/**
 * 创建一个带样式的标题元素
 */
export function styledHeading(level: 1 | 2 | 3 | 4 | 5 | 6): Div & Styled<Div> {
  const div = new Div()
  div.setTagName(`h${level}`)
  return withStyled(div)
}

/**
 * 创建一个带样式的段落元素
 */
export function styledParagraph(): Div & Styled<Div> {
  const div = new Div()
  div.setTagName('p')
  return withStyled(div)
}

/**
 * 创建一个带样式的按钮元素
 */
export function styledButton(): Div & Styled<Div> {
  const div = new Div()
  div.setTagName('button')
  return withStyled(div)
}

/**
 * 创建一个带样式的输入元素
 */
export function styledInput(): Div & Styled<Div> {
  const div = new Div()
  div.setTagName('input')
  return withStyled(div)
}